<template>
  <div class="head-tags">
    <!--    <div class="header-menu-text head-menu-hometag" @click="linkTo(home)">首页</div>-->
    <div
      v-for="(menu, i) in Array.from(visitedViews)"
      @click="linkTo(menu)"
      :key="i"
      class="routerlink"
    >
      <div
        class="header-menu-text headmenu-othertag"
        :class="{ 'active-tag': menu.title == activetag }"
      >
        <span>{{ menu.title }}</span>
        <i
          class="el-icon-close tagicon"
          @click.prevent.stop="closetag(menu)"
        ></i>
      </div>
    </div>
  </div>
</template>

<script>
	import {strLen} from "@/utils/public.js";
export default {
  name: "pagetags",
  components: {},
  data() {
    return {
      hoverLeft: 0,
      hoverWidth: 0,
      home: { title: "首页", path: "/home" },
    };
  },
  computed: {
    visitedViews() {
      let temp;
      let tagW = 0;
      let pcWidth = document.documentElement.clientWidth;

	    do {
	    	temp = this.$store.state.tagsview.visitedviews;
	      tagW = 75+20+14+10+20;//最后一个 加的是 自定义的边距

	      for(let i=0;i<temp.length;i++){//加上每一个标签的长度
	      	let title = temp[i].title;
	      	let num = strLen(title);
	      	tagW = tagW + num*7 +48+10;
	      }

	      if(tagW>pcWidth){//如果长度大于界面宽度 ，那么删除一个标签
	      	this.$store.dispatch("closeFirstTag");
	      	temp = this.$store.state.tagsview.visitedviews;
	      }
			} while (tagW>pcWidth);

      return temp;

//    let tagLen = 6;
//    let res = temp;
//    let activetag = 9999;
//    if (temp.length > tagLen) {
//      //如果 页面标签 大于 标签定义的个数  那么就从活动标签开始往后数，如果后面个数不够就从活动标签往前继续首位插入
//      res = [];
//      if (this.$store.state.tagsview.activetag.path == "/home") {
//        activetag = -1;
//      }
//      for (let i = 0; i < temp.length; i++) {
//        //往后找 找到个数足够 为止
//        if (temp[i].path == this.$store.state.tagsview.activetag.path) {
//          res.push(temp[i]);
//          activetag = i;
//        }
//        if (i > activetag && res.length <= tagLen) {
//          res.push(temp[i]);
//        }
//      }
//      if (activetag != 9999) {
//        //res  个数不够往前找
//        for (let j = activetag - 1; j > 0; j--) {
//          if (res.length < tagLen) {
//            res.unshift(temp[j]);
//          }
//        }
//      }
//    }
//    return res;
    },
    activetag() {
      				console.log(this.$store.state.tagsview.activetag.title);
      return this.$store.state.tagsview.activetag.title;
    },
  },
  methods: {
    menuin(i) {
      this.hoverLeft = i * 100 + 100;
      this.hoverWidth = 100;
    },
    menuout() {
      if (this.activeIndex == -1) {
        this.hoverWidth = 100;
        this.hoverLeft = 0;
      } else {
        this.hoverLeft = 1000 + this.activeIndex * 100;
        this.hoverWidth = 100;
      }
    },
    userAction(command) {
      console.log(command);
    },
   	linkTo(item) {
   		this.linkClick(item);
   	},
    closetag(item) {
      this.$store.dispatch("delVisitedViews", item).then((activetag) => {
      	this.$set(activetag,'params',{id:activetag.funcId});
        this.linkClick(activetag);
      });
    },
  },
  mounted() {
//	console.log(document.documentElement.clientWidth);
  },
};
</script>

<style scoped>
.header-menu-text {
  position: relative;
  cursor: pointer;
  border-radius: 4px;
  height: 30px;
  line-height: 30px;
  padding: 0 32px 0 14px;
}
.head-menu-hometag {
  width: 56px;
  color: var(--tag-button-disable-text-color);
  background: var(--tag-button-disable-back-color);
}
.head-menu-hometag:hover {
  border: 1px solid var(--button-border-color);
  box-shadow: 0px 0px 5px 1px var(--button-border-color);
}
.headmenu-othertag {
  width: auto;
  margin-left: 10px;
  border: 1px solid var(--tag-button-border-color);
  color: var(--button-text-color);
  background: var(--button-back-color);
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.headmenu-othertag:hover {
  /*border: 1px solid var(--button-hover-back-color);*/
  border: none;
  margin-right: 2px;
  color: var(--button-active-text-color);
  background: var(--button-hover-back-color);
  box-shadow: 0px 0px 5px 3px var(--button-border-color);
}
.active-tag {
  border: none;
  background: var(--button-active-back-color);
  color: var(--button-active-text-color);
}
.active-tag:hover {
	margin-right: 0px;
}
.routerlink {
  text-decoration: none;
  font-size: 14px;
}
.tagicon {
  position: absolute;
  width: 18px;
  font-size: 16px;
  right: 5px;
  margin-top: 6px;
  color: var(--button-text-color);
}
</style>
